<template>
  <div>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="searchForm" class="user-search">
      <el-form-item label="药品类型：">
        <!-- 可清空下拉框 -->
        <el-select
          size="small"
          clearable
          v-model="searchForm.drugClassId"
          placeholder=""
        >
          <!--根据字典表生成下拉选项-->
          <el-option
            v-for="(label, value) in drugDict.class"
            :key="value"
            :label="label"
            :value="Number(value)"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="关键字：">
        <el-input
          size="small"
          v-model="searchForm.keyword"
          placeholder="输入药品名称/药品编码/拼音"
        ></el-input>
      </el-form-item>

      <el-form-item label="库存预警">
        <el-checkbox size="small" v-model="searchForm.stockAlert"></el-checkbox>
      </el-form-item>
      <el-form-item label="有效期预警">
        <el-checkbox size="small" v-model="searchForm.validAlert"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable prop="id" label="序号" width="100">
      </el-table-column>
      <el-table-column sortable prop="code" label="编码" width="100">
      </el-table-column>
      <el-table-column sortable prop="commonName" label="药品名称" width="200">
      </el-table-column>
      <el-table-column sortable prop="classId" label="类型" width="100">
        <template slot-scope="scope">
          <!--将classID转换为字典中的字符串显示（模型中的数据不会改变）-->
          <div>{{ drugDict.class[scope.row.classId] }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="norm" label="规格" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.doseFactor }}{{ drugDict.unit[scope.row.doseUnit] }}*{{
              scope.row.basicFactor
            }}{{ drugDict.unit[scope.row.basicUnit] }}/{{
              drugDict.unit[scope.row.unitId]
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="waterMark" label="库存" width="100">
        <template slot-scope="scope">
          <!--将查到的价格(单位:分)转换单位(元)进行显示-->
          <div>
            {{ scope.row.waterMark }} {{ drugDict.unit[scope.row.unitId] }}
          </div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="factoryId" label="生产厂家" width="200">
        <template slot-scope="scope">
          <div>{{ drugDict.factory[scope.row.factoryId] }}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="validPeriod" label="有效期限" width="200">
        <template slot-scope="scope">
          <div>{{ scope.row.validPeriod | timestampToTime }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="showDialog(scope.$index, scope.row)"
            >查看明细</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="handlePageEvent"
    ></Pagination>

    <!-- 编辑界面 -->
    <el-dialog
      title="库存明细"
      :visible.sync="dialogVisibale"
      width="800px"
      @click="closeDialog"
    >
      <!--列表-->
      <el-table
        size="small"
        :data="operList"
        highlight-current-row
        v-loading="loading"
        border
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column sortable prop="id" label="序号" width="100">
        </el-table-column>
        <el-table-column sortable prop="recordNo" label="单号" width="200">
        </el-table-column>
        <el-table-column sortable prop="operType" label="操作类型" width="100">
          <template slot-scope="scope">
            <div>{{ drugDict.oper[scope.row.operType] }}</div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="quantity" label="数量" width="100">
        </el-table-column>
        <el-table-column sortable prop="operator" label="操作人员" width="100">
          <template slot-scope="scope">
            <div>{{ employeeDict[scope.row.operator] }}</div>
          </template>
        </el-table-column>
        <el-table-column sortable prop="operDate" label="操作时间" width="200">
          <template slot-scope="scope">
            <div>{{ scope.row.operDate | timestampToTime }}</div>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <Pagination
        v-bind:child-msg="pageparm1"
        @callFather="handlePageEvent1"
      ></Pagination>
    </el-dialog>
  </div>
</template>

<script>
// 引入药品类型字典
import { drugDict } from "../../dict/drugDict";
import Pagination from "../../components/Pagination";
// 引入时间段选择组件
import DateTimeRange from "../../components/DateTimeRange";
// 引入 Axios
import axios from "axios";

export default {
  props: ["employeeDict"],
  data() {
    return {
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      dialogVisibale: false, //控制编辑页面显示与隐藏
      title: "添加",
      editMedicine: {},
      // 搜索框数据
      searchForm: {
        keyword: "",
        drugClassId: null,
      },
      userparm: [], //搜索权限
      listData: [], //药品数据
      medicineId: 1, //当前药品id
      operList: [], //药品操作明细
      // 分页参数
      pageparm: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      pageparm1: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      drugDict: drugDict, // 药品相关字典
    };
  },
  // 注册组件
  components: {
    Pagination,
    DateTimeRange,
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    this.getdata(this.formInline);
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 获取数据
    getdata() {
      this.loading = true;
      // 待提交的数据
      let dto = {
        pageNum: this.pageparm.pageNum,
        pageSize: this.pageparm.pageSize,
      };
      // 根据 this.searchForm 进行构建 dto
      if (this.searchForm.keyword !== "")
        dto.keywords = this.searchForm.keyword;
      if (this.searchForm.drugClassId !== null) {
        if (dto.medicine === undefined) dto.medicine = {};
        dto.medicine.classId = this.searchForm.drugClassId;
      }
      if (this.searchForm.stockAlert) {
        dto.stockAlert = true;
      }
      if (this.searchForm.validAlert) {
        dto.validAlert = true;
      }
      // 发送请求
      axios
        .post("/api/medicine/select", dto)
        .then((res) => {
          if (res.data.data == null) {
            throw "error";
          }
          return res.data.data;
        })
        .then((data) => {
          this.listData = data.list;
          this.pageparm.pageNum = data.pageNum;
          this.pageparm.pageSize = data.pageSize;
          this.pageparm.total = data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });

      this.loading = false;
    },
    getDetail() {
      axios
        .post("/api/medicine/selectOperById", {
          pageNum: this.pageparm1.pageNum,
          pageSize: this.pageparm1.pageSize,
          medicine: { id: this.medicineId },
        })
        .then((res) => {
          this.operList = res.data.data.list;
          this.pageparm1.total = res.data.data.size;
        })
        .catch((err) => {
          this.editFormVisible = false;
          this.loading = false;
          this.$message.error("获取数据失败，请稍后再试！");
        });
    },
    // 分页插件事件
    handlePageEvent(parm) {
      this.pageparm.pageNum = parm.currentPage;
      this.pageparm.pageSize = parm.pageSize;
      this.getdata();
    },
    // 分页插件事件
    handlePageEvent1(parm) {
      this.pageparm1.pageNum = parm.currentPage;
      this.pageparm1.pageSize = parm.pageSize;
      this.getDetail();
    },
    // 搜索事件
    search() {
      this.pageparm.pageNum = 1;
      this.getdata();
    },
    showDialog(index, row) {
      this.dialogVisibale = true;
      this.medicineId = row.id;
      this.getDetail();
    },
    closeDialog() {
      this.dialogVisibale = false;
    },
  },
};
</script>

<style scoped>
hr {
  border-style: dashed;
  color: gainsboro;
}
.edit-input {
  width: 75%;
}

.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 